<template>
    <div class="add-class-student">
        <line-head-form class="head" title="添加学员" type="add" />
        <el-form :inline="true" :model="form" class="t-form class-list">
            <el-form-item>
                <el-input v-model="form.nameOrNo" placeholder="学生姓名、手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" class="search-btn">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="select-class">
            <div class="select-table">

                <el-table class="line-table" :data="studentObj.list" style="width: 100%" header-align="center" empty-text="暂无学生，请先添加学生" @row-click="rowClick">
            <el-table-column prop="name" label="学生姓名" align="center" fixed></el-table-column>
            <el-table-column prop="phoneNo" label="手机号码" align="center" ></el-table-column>
                </el-table>
                <v-pagination ref="pagin" class="pag" :total="studentObj.total|toNumber" @getListResult="getStudent" :currentPage="form.pageIndex"></v-pagination>
            </div>
            <div class="cut-line"></div>
            <div class="has-select">
                <div class="has-head">已选择</div>
                <ul>
                    <li v-for="(item,i) in selectList">
                        <span class="class-name">{{item.name}}
                            <!--（
                            <span class="school-name">{{item.school}}</span>）-->
                            </span>
                        <svg class="icon" aria-hidden="true" @click="deleteSelected(i)">
                            <use xlink:href="#icon-icon-cross-empty"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </div>
        <div class="m-next-btn">
            <el-button class="height-btn" @click="saveClassStudent">确定</el-button>
            <el-button class="light-btn" @click="$router.go(-1)">取消</el-button>
        </div>
    </div>
</template>
<script>
import LineHeadForm from 'common/LineHeadForm'
import VPagination from "common/Pagination"
import io from "lib/io"
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
    name: 'add-class-student',
    components: {
        LineHeadForm,
        VPagination
    },
    computed: {
        ...mapState(['condition', 'school', 'classes','exam']),
        ...mapGetters(['config'])
    },
    data() {
        return {
            id: this.$route.query.id,
            form: {
                nameOrNo: '',
                pageIndex: 1,
                pageSize: 10
            },
            selectList: [],
            studentObj:{},
        }
    },
    watch: {
        'exam.examDetail'(val){
            this.selectList=[...val.lessonClassList]
        }
    },
    created() {
        this.getClassStudents()
        this.getStudent()
    },
    methods: {
        ...mapActions(['findBaseLevelPage', 'findBaseSchoolPage', 'findClassPage', 'detailExamModel']),
        async getStudent(opt) {
            let {data}=await io.post6(io.findStudentList,{ ...this.form, ...opt })
            if(data.success){
                this.studentObj=data.data
            }
        },
        async getClassStudents(opt) {
            let {data}=await io.post6(io.findClaStudentPage,{lessonClassId:this.id,pageIndex:1,pageSize:1000000})
            if(data.success){
                this.selectList=[...data.data.list]
            }
        },
        search() {
            this.$refs.pagin.changePage(1)
            this.form.pageIndex=1
            this.getStudent()
        },
        deleteSelected(index) {
            this.selectList.splice(index, 1)
        },
        rowClick(row, event, column) {
            let has = false
            this.selectList.map((item, i) => {
                if (item.id === row.id) {
                    has = true
                }
            })
            if (!has) {
                this.selectList.splice(0, 0, row)
            } else {
                this.$message('该学生已选择')
            }
        },
        async saveClassStudent() {
            // if (!this.selectList.length) {
            //     this.$message('请选择学生')
            //     return
            // }
            let ids = []
            this.selectList.map((item, i) => {
                ids.push(item.id)
            })
            let { data } = await io.post6(io.bindStudent, { lessonClassId: this.id, studentIdList: ids.join(',') })
            if (data.success) {
                this.$message({ type: 'success', message: '保存成功' })
                this.$router.go(-1)
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
.head
    margin-top 10px
.class-list
    padding 40px 0 30px 20px
.m-next-btn
    text-align center
    margin-top 40px
    padding-bottom 40px
.select-class
    position relative
    .select-table
        background #f7f7f7
        min-height 500px
    div
        width 46%
        display inline-block
        vertical-align top
        height 100%
    .cut-line
        width 8px
    .has-select
        border 1px dashed #23c9b3
        padding 20px 
        position absolute
        top 0
        bottom 0
        height 100%
        box-sizing border-box
        .has-head
            color #00a8d2
            font-weight bold
            height 55px
        ul
            li
                margin-bottom 20px
                .class-name
                    display inline-block
                    overflow hidden
                    text-overflow ellipsis
                    white-space nowrap
                    max-width 500px
                .icon
                    float right 
                    right 40px
                    font-size 20px
                    color #23c9b3
                    cursor pointer
</style>
<style lang="stylus">
.select-class
    .line-table
        background #f7f7f7
        tr
            background #f7f7f7 !important
        th
            background #f7f7f7 !important
            div
                background #f7f7f7 !important
        .hover-row
            background #f4fdff
            cursor pointer
</style>



